<template>
    <div id="app">
        <div id="nav">
            <router-link to="/components" tag="p">组件</router-link>
            <router-link to="/components_slot" tag="p">插槽</router-link>
            <router-link to="/codehopeForm" tag="p">自定义Form</router-link>
            <router-link to="/codehopecuex" tag="p">自定义VUEX</router-link>
        </div>
        <div style="width: 70%;">
            <router-view/>
        </div>
    </div>
</template>

<style lang="scss">
    * {
        padding: 0;
        margin: 0;
    }

    #app {
        .router-link-active {
            color: #6b801e;
        }

        display: flex;
        justify-content: space-between;

        #nav {
            width: 20%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #d7f3f3;
            justify-content: space-around;
            text-align: center;
            p {
                cursor: pointer;
                transition: all .6s;

                &:hover {
                    color: orange;
                }
            }
        }
    }
</style>
